<template>
	<div>
		<div class="titleDiv">
			<div class="titleFontDiv">
				<div class="fontBottomLine">快报</div>
				统计趋势
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden1?'display:block':'display:none'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden1">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden1?'display:none':'display:block'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden1">
			</div>
		</div>
		<div v-show="hidden1" id="lineChart2"
		     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

		</div>
		<div class="titleDiv">
			<div class="titleFontDiv">
				<div class="fontBottomLine">舆情</div>
				情感趋势
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden2?'display:block':'display:none'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden2">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden2?'display:none':'display:block'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden2">
			</div>
		</div>
		<div v-show="hidden2" id="lineChart"
		     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

		</div>
		<div style="display: flex">
			<div style="width: 50%">
				<div class="titleDiv" style="margin-left:4%">
					<div class="titleFontDiv">
						<div class="fontBottomLine">情感</div>
						分析
					</div>
				</div>
			</div>
			<div style="width:42.5%">
				<div class="titleDiv" style="margin-left:2.5%;">
					<div class="titleFontDiv">
						<div class="fontBottomLine">媒体</div>
						分类统计
					</div>
				</div>
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden3?'display:block':'display:none'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:30px;margin-right:35px" @click="showHidden3">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden3?'display:none':'display:block'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:30px;margin-right:35px" @click="showHidden3">
			</div>
		</div>
		<div v-show="hidden3" style="display: flex;width: 98%;margin-left: 1%;">
			<div style="width: 50%">
				<div id="pieChart"
				     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

				</div>
			</div>
			<div style="width: 50%">
				<div id="mediaBarChart"
				     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;width: 595px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

				</div>
			</div>
		</div>
		<div class="titleDiv">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">热词</div>
				词云
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden4?'display:block':'display:none'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden4">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden4?'display:none':'display:block'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden4">
			</div>
		</div>
		<div v-show="hidden4"
		     style="width: 96%;margin-top: 10px;border: 1px solid #EFEFEF;height: 390px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8;padding: 25px 20px">
			<div style="padding-left: 20px">
				通过对热词词云的分析,可以发现媒体和网民对于该事件主要关注"
				<span v-for="(item,i) in hotList" v-show="i<5">{{ item.name }}  </span>
				"等信息。
			</div>
			<div style="height: 300px;width: 100%;margin-top: 15px;display: flex">
				<div id="wordCloudChart" style="width: 545px;height: 280px;">
				</div>
				<div
						style="margin-top: 20px;margin-left: 20px;width: 520px;height: 85%;display: flex;flex-wrap: wrap;background-clip: content-box;background: #F8FAFF;">
					<div class="tableTr">
						<div class="tableTd20">序号</div>
						<div class="tableTd30">热词</div>
						<div class="tableTd50">频次</div>
					</div>
					<div class="tableTr" v-if="i<5" v-for="(item,i) in hotList2">

						<div v-if="i == 0" class="tableTd20"><img src="../../../public/img/sort1.png" style="width: 30px"></div>
						<div v-else-if="i == 1" class="tableTd20"><img src="../../../public/img/sort2.png" style="width: 30px">
						</div>
						<div v-else-if="i == 2" class="tableTd20"><img src="../../../public/img/sort3.png" style="width: 30px">
						</div>
						<div v-else class="tableTd20">{{ i + 1 }}</div>

						<div class="tableTd30">{{ item.name }}</div>
						<div class="tableTd50"><span style="">{{ item.value }}</span>
							<a-progress :percent="item.decimal" :showInfo="false" style="width:55%;" :strokeColor='color'/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="titleDiv">
			<div class="titleFontDiv">
				<div class="fontBottomLine">热词</div>
				分布趋势
			</div>
			<div style="height: 100%;width: 80%;display: flex;margin-right: 15px;">
				<div class="scatterLabel" :style="media_typeId==0?'color: rgb(23,119,255)':''" @click="typeChoose">全部</div>
				<div class="scatterLabel" v-if="i<11" :style="media_typeId==item.id?'color: rgb(23,119,255)':''"
				     v-for="(item,i) in media_type" @click="typeChoose2(item.id)">{{ item.mediaName }}
				</div>
				<div style="margin-top: 0.4%;">
           <span @click="showOtherMedia" v-if="media_type.length>11">
                                  <span style="color: #1777FF;cursor: pointer;font-size: 12px;">查看更多类型</span><div
		           style="transform: rotate(90deg);font-size: 12px;display: inline-block;color: #1777FF;margin-left: 3px;cursor: pointer">&gt;&gt;</div>
                    </span>
				</div>
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden5?'display:block':'display:none'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden5">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden5?'display:none':'display:block'" alt=""
				     style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:35px" @click="showHidden5">
			</div>
		</div>
		<div class="titleDiv" :style="collspanMedia?'display:none':''" style="padding-left: 13.5%;margin-top: 0%;">
			<div style="height: 100%;width: 75%;display: flex;margin-right: 15px;">
				<div class="scatterLabel" v-if="i>=11" :style="media_typeId==item.id?'color: rgb(23,119,255)':''"
				     v-for="(item,i) in media_type" @click="typeChoose3(item.id)">{{ item.mediaName }}
				</div>
			</div>
		</div>
		<div id="scatterChart" v-show="hidden5"
		     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 350px;width: 1213px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

		</div>
	</div>

</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import echarts from "echarts";
import '@/utils/wordCloud'
import {getMediaTypeList} from '@/api/generalDetection/generalDetetionResults'
import {
	statisticsCommonDispatch,
	statisticsCommonEmotionTotal,
	statisticsCommonEmotionTrand,
	statisticsCommonMedia,
	statisticsCommonWordCloud,
	statisticsCommonWordTrand
} from "@/api/generalDetection/generalDetetion";


const CubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y]
		const c1 = [shape.x - 9, shape.y - 9]
		const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
		const c3 = [xAxisPoint[0], xAxisPoint[1]]
		ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
	}
})
const CubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c1 = [shape.x, shape.y]
		const c2 = [xAxisPoint[0], xAxisPoint[1]]
		const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
		const c4 = [shape.x + 18, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
const CubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const c1 = [shape.x, shape.y]
		const c2 = [shape.x + 18, shape.y - 9]
		const c3 = [shape.x + 9, shape.y - 18]
		const c4 = [shape.x - 9, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]


const checkedList_name = [];
export default {
	name: "generalDetectionStatistics",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			hidden1: true,
			hidden2: true,
			hidden3: true,
			hidden4: true,
			hidden5: true,
			media_type: [], // 媒体类型
			media_typeId: 0, // 媒体类型
			sentimentfx_zm: undefined,//情感分析——正面
			sentimentfx_fm: undefined,//情感分析——负面
			sentimentfx_zx: undefined,//情感分析——中性
			yqtrend_x: [],//舆情情感趋势x轴
			yqtrend_y: [],//舆情情感趋势y轴
			yqtrend_y1: [],//舆情情感趋势y轴
			yqtrend_y2: [],//舆情情感趋势y轴
			letters_x: [],//统计分析快报折线图x
			letters_y: [],//统计分析快报折线图y
			media_x: [],//，媒体分类统计x轴
			media_y: [],//，媒体分类统计y轴
			hotList: [],//热词词云
			hotList2: [],//热词词云
			distribution: [],//热词分布趋势
			startTime: 0,//热词分布趋势 起始时间
			endTime: 0,//热词分布趋势 结束时间
			collspanMedia: true, // 查看更多媒体类型
			myChartBottomLine: undefined,
			myChartMediaBar: undefined,
			myChartScatter: undefined,
			myChartPie: undefined,
			dataLevelLine1: [12, 80, 79, 27, 99, 43, 33],
			dataLevelLine2: [11, 76, 94, 23, 29, 77, 53],
			dataLevelLine3: [67, 62, 65, 35, 44, 69, 52],
		}
	},
	props: {
		//根据commandId查询列表
		commandIds: {
			type: Number,
		},
	},

	methods: {

		// 查看更多媒体类型
		showOtherMedia() {
			this.collspanMedia = !this.collspanMedia;
		},

		//类型选择 --全部
		typeChoose() {
			this.media_typeId = 0;
			this.wordDistributionTrend();
		},

		// 媒体类型选择 -- 接口返回的类型
		typeChoose2(id) {
			this.media_typeId = id;
			this.wordDistributionTrend();
		},

		// 媒体类型选择 -- 接口返回的类型
		typeChoose3(id) {
			this.media_typeId = id;
			this.wordDistributionTrend();
		},

		//获取统计分析——热词分布趋势
		wordDistributionTrend() {
			let params2 = {
				commandId: this.commandIds,
				mediaTypeId: this.media_typeId
			};
			//获取统计分析——热词分布趋势
			statisticsCommonWordTrand(params2).then(res => {
				var Time = res.data.wordsMapList[0].date;
				var Time1 = res.data.wordsMapList[res.data.wordsMapList.length - 1].date;
				// 获取起始时间和结束时间的毫秒数
				this.startTime = new Date(Time).getTime();
				this.endTime = new Date(Time1).getTime();
				this.distribution = [];
				for (let i = 0; i < res.data.wordsMapList.length; i++) {
					let date = res.data.wordsMapList[i].date;
					var time = new Date(date).getTime();

					// 判断是否为空
					if (res.data.wordsMapList[i].words != [] && res.data.wordsMapList[i].words.length > 0) {
						for (let j = 0; j < res.data.wordsMapList[i].words.length; j++) {
							let hotName = res.data.wordsMapList[i].words[j].hotName;
							let total = res.data.wordsMapList[i].words[j].total;
							this.distribution[i] = [time, total, hotName]
						}
					}
				}
				this.drawScatter();
			});
		},

		init() {

			function GetPercent(num, total) {
				/// <summary>
				/// 求百分比
				/// </summary>
				/// <param name="num">当前数</param>
				/// <param name="total">总数</param>
				num = parseFloat(num);
				total = parseFloat(total);
				if (isNaN(num) || isNaN(total)) {
					return "-";
				}
				return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00);
			}


			let params = {
				commandId: this.commandIds
			};

			// 获取统计分析——热词分布趋势
			this.wordDistributionTrend();

			//获取统计分析——情感分析饼图
			statisticsCommonEmotionTotal(params).then(res => {
				this.sentimentfx_zm = res.data.emotionTotal.positiveNum;
				this.sentimentfx_fm = res.data.emotionTotal.negativeNum;
				this.sentimentfx_zx = res.data.emotionTotal.neutralNum;
				this.drawPie();
			});

			//获取统计分析——舆情情感趋势
			statisticsCommonEmotionTrand(params).then(res => {
				this.yqtrend_x = res.data.lastFiveDay;
				this.yqtrend_y = res.data.positiveList;
				this.yqtrend_y1 = res.data.neutralList;
				this.yqtrend_y2 = res.data.negativeList;
				this.drawLine();
			});

			//获取统计分析——快报
			statisticsCommonDispatch(params).then(res => {
				this.letters_x = res.data.lastFiveDay;
				this.letters_y = res.data.values;
				this.lettersTrend();
			});

			//获取统计分析——媒体分类柱状图
			statisticsCommonMedia(params).then(res => {
				this.media_x = res.data.mediaS;
				this.media_y = res.data.total;
				this.drawMediaBar();
			});

			//获取统计分析 --热词词云
			statisticsCommonWordCloud(params).then(res => {
				let total = 0;
				this.hotList2 = [];
				this.hotList = [];
				for (let i = 0; i < res.data.words.length; i++) {
					total += res.data.words[i].total;
				}
				for (let i = 0; i < res.data.words.length; i++) {
					let obj = {};
					obj.name = res.data.words[i].hotName;
					obj.value = res.data.words[i].total;
					this.hotList.push(obj);

					let obj2 = {};
					obj2.value = res.data.words[i].total;
					obj2.name = res.data.words[i].hotName;
					obj2.decimal = GetPercent(obj.value, total);
					this.hotList2.push(obj2);
				}
				this.drawWorldCloud();
			});


		},


		/**
		 * 控制快报统计趋势隐藏显示
		 */
		showHidden1() {
			this.hidden1 = !this.hidden1
		},
		/**
		 * 控制舆情情感趋势隐藏显示
		 */
		showHidden2() {
			this.hidden2 = !this.hidden2
		},
		/**
		 * 控制舆情情感趋势隐藏显示
		 */
		showHidden3() {
			this.hidden3 = !this.hidden3
		},
		/**
		 * 控制热词词云隐藏显示
		 */
		showHidden4() {
			this.hidden4 = !this.hidden4
		},
		/**
		 * 控制热词分布趋势隐藏显示
		 */
		showHidden5() {
			this.hidden5 = !this.hidden5
		},

		drawWorldCloud() {
			this.myChartWordCloud = this.$echarts.init(document.getElementById("wordCloudChart"))
			// 绘制图表
			this.myChartWordCloud.setOption({
				tooltip: {
					show: false
				},
				series: [{
					name: '热词分析',
					type: 'wordCloud',
					sizeRange: [14, 50],
					rotationRange: [0, 0],
					shape: 'circle',
					textPadding: 0,
					autoSize: {
						enable: true,
						minSize: 6
					},
					textStyle: {
						normal: {
							color: function () {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: this.hotList
				}]
			})

			/*myChart.on('click', function (params) {
				//alert((params.name));
				window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));

			});*/
		},


		drawLine() {
			let t = this
			let color = [
				'#FF5B00', '#FEAE31', '#5D80FD', '#67CC81'
			];

			let xAxisData = ['2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06', '2021-12-07', '2021-12-08', '2021-12-09'];
			let yAxisData1 = this.dataLevelLine3;
			let yAxisData2 = this.dataLevelLine2;
			let yAxisData3 = this.dataLevelLine1;

			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			}

			this.myChartBottomLine = this.$echarts.init(document.getElementById('lineChart'))
			// 绘制图表
			this.myChartBottomLine.setOption({
				color: color,
				legend: {
					top: 10,
					left: 'center',
					icon: 'rect',
					itemWidth: 12,
					itemHeight: 12,
					itemGap: 20,
				},
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						let html = '';
						params.forEach(v => {
							html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                `;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				},
				grid: {
					top: '18%',
					bottom: '14%',
					left: 30,
					right: 50,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: this.yqtrend_x,
				}],
				yAxis: [{
					show: false,
					type: "value",
					name: '数量',
					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 10
					},
					// 分割线
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					// name: "2018",
					name: "负面",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[0],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[0], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
										offset: 0,
										color: hexToRgba(color[0], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[0], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[0], 0.1),
							shadowBlur: 10
						}
					},
					data: this.yqtrend_y2
				}, {
					name: "中性",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[1],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[1], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式 (实心点)
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
										offset: 0,
										color: hexToRgba(color[1], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[1], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[1], 0.1),
							shadowBlur: 10
						}
					},
					data: this.yqtrend_y1
				},
					{
						name: "正面",
						type: "line",
						smooth: true,
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[2],
								shadowBlur: 3,
								shadowColor: hexToRgba(color[1], 0.5),
								shadowOffsetY: 8
							}
						},
						symbol: 'circle',//数据交叉点样式 (实心点)
						areaStyle: {
							normal: {
								color: new t.$echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
											offset: 0,
											color: hexToRgba(color[2], 0.3)
										},
											{
												offset: 1,
												color: hexToRgba(color[2], 0.1)
											}
										],
										false
								),
								shadowColor: hexToRgba(color[2], 0.1),
								shadowBlur: 10
							}
						},
						data: this.yqtrend_y
					}]
			});


		},


		lettersTrend() {
			let t = this;
			let color = [
				'#FF5B00', '#FEAE31', '#5D80FD', '#67CC81'
			];

			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			};
			this.myChartBottomLine2 = this.$echarts.init(document.getElementById('lineChart2'))
			// 绘制图表
			this.myChartBottomLine2.setOption({
				color: color[3],
				legend: {
					show: false,
					top: 10,
					right: '40%',
					icon: 'rect',
					itemWidth: 12,
					itemHeight: 12,
					itemGap: 50,
				},
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						let html = '';
						params.forEach(v => {
							html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                `;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				},
				grid: {
					top: '18%',
					bottom: '14%',
					left: 30,
					right: 50,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: this.letters_x,
				}],
				yAxis: [{
					show: false,
					type: "value",
					name: '数量',
					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 10
					},
					// 分割线
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					name: "快报统计",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[3],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[3], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
										offset: 0,
										color: hexToRgba(color[3], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[3], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[3], 0.1),
							shadowBlur: 10
						}
					},
					data: this.letters_y
				},]
			});
		},

		drawPie() {
			var that = this
			this.myChartPie = this.$echarts.init(document.getElementById('pieChart'))
			// 绘制图表
			this.myChartPie.setOption({

				tooltip: {
					show: true,
					trigger: 'item',
					formatter: "{b}",
					backgroundColor: '#F8F8F8',
					textStyle: {
						color: "#000000"
					}
				},
				legend: {
					itemWidth: 15,
					itemHeight: 15,
					itemGap: 80,
					top: 30,
				},
				series: [{
					roseType: 'area',
					name: '数量',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '60%'],
					data: [{value: this.sentimentfx_zm, name: '正面'},
						{value: this.sentimentfx_zx, name: '中性'},
						{value: this.sentimentfx_fm, name: '负面'},],
					label: {
						normal: {
							color: 'black',
							show: false,
							position: 'center',
							formatter: '{b}情感\n{text|{c}}',
							rich: {
								text: {
									align: 'center',
									verticalAlign: 'middle',
									padding: 8,
									fontSize: 30,
									color: 'black'
								},
								value: {
									align: 'center',
									verticalAlign: 'middle',
									fontSize: 20
								}
							}
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '12'
							}
						}
					},
					itemStyle: {
						normal: {
							color: function (params) {
								var colorList = ['#5D80FD', '#FEAE31', '#FF5B00'];
								return colorList[params.dataIndex]
							}
						}
					},
					labelLine: {
						normal: {
							show: true
						}
					}
				}]
			})

			this.myChartPie.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0
			});

			this.myChartPie.on("mouseover", function (e) {
				var index = 0;
				if (e.dataIndex !== index) {
					that.myChartPie.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: index
					});
				}
			});
			this.myChartPie.on("mouseout", function (e) {
				var index = 0;
				if (e.dataIndex !== index) {
					that.myChartPie.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: index
					});
				}
			});
		},


		drawMediaBar() {
			let t = this;
			this.myChartMediaBar = this.$echarts.init(document.getElementById('mediaBarChart'))
			// 绘制图表
			this.myChartMediaBar.setOption({
				grid: {
					left: '2%',
					right: '4%',
					bottom: '2%',
					top: '5%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					formatter: function (params) {
						return params[0].name + '<br/>' +
								"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
								params[0].seriesName + ' : ' + params[0].value + ' <br/>'
					}
				},
				xAxis: [{
					type: 'category',
					inverse: false,
					axisLabel: {
						show: true,
						margin: 15,
						interval: 0,   //这个一定要有，别忘记了
						rotate: 25,
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}

					},
					data: this.media_x,
				}, {
					type: 'category',
					inverse: false,
					axisTick: 'none',
					axisLine: 'none',
					show: true,
					/*axisLabel: {
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},*/
					// data: [567456,434980,385743,114783,92455,71964,51964]
				}],
				yAxis: {
					show: true,
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
				},
				series: [{
					name: '数量',
					type: 'bar',
					zlevel: 1,
					itemStyle: {
						normal: {
							barBorderRadius: [0, 0, 0, 0],
							color: new t.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0,
								color: '#1677FE'
							}, {
								offset: 1,
								color: '#1677FE'
							}]),
							shadowBlur: 0,
							shadowColor: 'rgba(87,220,222,0.7)'
						},
					},
					barWidth: 10,
					data: this.media_y,
				},
					{
						z: 0,
						name: '背景',
						type: 'bar',
						barWidth: 20,
						barGap: '-150%',
						data: [0, 0, 0, 0, 0, 0, 0],
						itemStyle: {
							normal: {
								color: '#F2F4F7',
								barBorderRadius: [0, 0, 0, 0],
							}
						},
						emphasis: {
							itemStyle: {
								color: '#F2F4F7',
								barBorderRadius: [0, 0, 0, 0],
							},
						}
					},
				]

			})
		},

		drawScatter() {
			//生成假数据用
			var tempData = [];
			var start = 1638460800000;//2021-12-03 00:00:00
			var end = 1638979200000;//2021-12-09 00:00:00
			var cha = 518400000;//上面两个变量相差
			for (var i = 0; i < 100; i++) {
				var random = Math.random() * cha;
				var random2 = Math.random() * 120;
				var resultTime = start + random;
				tempData[i] = [resultTime, random2, "安全漏洞"]
			}

			var today = new Date(new Date().toLocaleDateString())
			this.myChartScatter = this.$echarts.init(document.getElementById('scatterChart'))
			// 绘制图表
			this.myChartScatter.setOption({
				grid: {
					left: "6%",
					right: "6%",
					bottom: "11%",
				},
				tooltip: {
					trigger: 'item',
					showDelay: 0,
					formatter: function (params) {
						return params.value[2]
					},
				},
				xAxis: {
					min: this.startTime,
					max: this.endTime,
					type: "value",
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					maxInterval: 24 * 60 * 60 * 1000,
					axisLabel: {
						interval: 24 * 60 * 60 * 1000,
						formatter: function (params) {
							var oDate = new Date(params);
							var oYear = oDate.getFullYear();
							var oMonth = oDate.getMonth() + 1;
							var oDay = oDate.getDate();
							//var  oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
							var oTime = (oMonth) + '-' + (oDay);
							return oTime;
						}
					},
					axisPointer: {
						show: false,
						snap: true,
						label: {
							formatter: function (params) {
								var oDate = new Date(params.value);
								var oYear = oDate.getFullYear();
								var oMonth = oDate.getMonth() + 1;
								var oDay = oDate.getDate();
								// var   oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
								var oTime = (oMonth) + '-' + (oDay);
								return oTime;
							},
							precision: 0//文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
						}
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
				},
				series: [
					{
						symbolSize: 12,
						data: this.distribution,
						type: 'scatter',
						itemStyle: {
							color: "#5DB5E2"
						}
					}
				]
			})
		}
	},
	watch: {
		commandIds(val, oldVal) {
			if (val != oldVal) {
				this.init();
			}
		},
	},
	mounted() {
		//获取统计数据
		this.init();

		// 获取媒体类型
		getMediaTypeList().then(res => {
			this.media_type = res.data;
		});

	},


}
</script>

<style scoped lang="scss">

.modal-box /deep/ .ant-modal-body {
	min-height: 144px;
}

.modal-box /deep/ .ant-modal-content {
	height: 250px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	/*border: solid #F0F0F0 1px;*/
	/*text-align: center;*/
	/*padding-left: 1%;*/
	/*padding-right: 1%;*/
	/*margin-right: 1%;*/
	margin: 0 5px;
	color: black;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#lineChart2 {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#lineChart2 {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

input[type=checkbox]:checked + label:before { /*before为伪元素可以在元素之后添加内容*/
	display: block;
	/*	css3中的content字符编码*/
	content: "";
	/*	复选框里面的&radic;居中*/
	text-align: center;
	/*	复选框里面的&radic;大小*/
	font-size: 13px;
	/*	字体的颜色*/
	color: #3D8EF7;
	/*  复选框勾选后的背景颜色*/
	background: #3D8EF7;
	margin-left: 3px;
	margin-top: 3px;
	height: 10px;
	width: 10px;
}

input[type=checkbox] {
	/* visibility 属性规定元素是否可见*/
	visibility: hidden;
}

.checkboxClass {
	width: 18px;
	height: 18px;
	line-height: 18px;
	cursor: pointer;
	position: relative;
	border: 1px solid #ccc; /*改变复选框的边框颜色也可以不要边框*/
	display: inline-block;
}

.topDiv {
	border-bottom: 1px solid #dcdcdc;
	width: 90%;
	height: 60px;
	margin-left: 5%;
	padding-left: 10px;
	line-height: 60px;
	display: flex
}

.titleDiv {
	height: 40px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 95%;
	margin-left: 2%;
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

/deep/ .ant-timeline-item-head-custom {
	background: transparent !important;
}

.angle-wrapper:before {
	content: '';
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-right-color: #eeeeee;
	position: absolute;
	left: calc(-2% - 5px);
	top: 50%;
	margin-top: -12px;
}

.angle-wrapper:after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #FFFFFF;
	position: absolute;
	left: calc(-2% - 1px);
	top: 50%;
	margin-top: -10px;
}

.angle-wrapper {
	width: 93%;
	height: 40px;
	position: relative;
	border: 2px solid #eeeeee;
	margin-left: 2%;
	background-color: white;
	line-height: 30px;
	padding-left: 15px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

.angle-wrapper-bottom {
	display: flex;
	margin-top: 5px;
	justify-content: space-between;
	width: 70%;
	font-size: 12px;
	margin-left: 4%
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.tableTr {
	border: 1px solid #F5F8FF;
	height: 35px;
	width: 100%;
	background-color: white;
	display: flex;
	align-items: center;
	color: #A0A4AA;
}

.tableTd20 {
	width: 20%;
	text-align: center
}

.tableTd30 {
	width: 30%;
	text-align: center
}

.tableTd50 {
	width: 50%;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

/deep/ .ant-table-tbody > tr:nth-child(even) {
	background-color: #FAFAFA;
}

/deep/ .ant-table-tbody > tr > td {
	border: 0;
}

/deep/ .ant-table-thead > tr > th {
	background-color: white;
	font-weight: bold;
}

.ant-btn-primary {
	color: #ffffff;
}
</style>
